<script setup lang="ts">
  import { watch } from 'vue';
  import { $t } from '@/locales';
  import { useAppStore } from '@/store/modules/app';
  import { useEcharts } from '@/hooks/common/echarts';

  defineOptions({
    name: 'PieChart',
  });
  interface Props {
    data: any;
  }

  const props: any = defineProps<Props>();

  const appStore = useAppStore();

  const { domRef, updateOptions } = useEcharts(() => ({
    tooltip: {
      trigger: 'item',
    },
    title: {
      text: `${$t('page.home.voiceAll')}: ${(props.data?.voiceLoraTotal ?? 0) + (props.data?.voiceNoLoraTotal ?? 0)}`,
      // subtext: `${$t('page.home.voiceAll')}: ${(props.data?.voiceTotal ?? 0) + (props.data?.voiceNoLoraTotal ?? 0) ?? 0}`,
      left: 'center',
    },
    legend: {
      bottom: '1%',
      left: 'center',
      itemStyle: {
        borderWidth: 0,
      },
    },
    series: [
      {
        color: ['#fedc69', '#5da8ff', '#8e9dff', '#fedc69'],
        name: $t('page.home.voiceAll'),
        type: 'pie',
        radius: ['45%', '75%'],
        avoidLabelOverlap: false,
        minAngle: 18,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 1,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '12',
          },
        },
        labelLine: {
          show: false,
        },
        data: [] as { name: string; value: number }[],
      },
    ],
  }));

  async function mockData() {
    await new Promise((resolve) => {
      setTimeout(resolve, 1000);
    });

    updateOptions((opts) => {
      opts.series[0].data = [
        {
          name: $t('page.home.voiceLoraTotal'),
          value: props.data?.voiceLoraTotal ?? 0,
        },
        {
          name: $t('page.home.voiceNoLoraTotal'),
          value: props.data?.voiceNoLoraTotal ?? 0,
        },
        // { name: $t('page.home.work'), value: 40 },
        // { name: $t('page.home.rest'), value: 30 },
      ];

      return opts;
    });
  }

  function updateLocale() {
    updateOptions((opts, factory) => {
      const originOpts = factory();

      opts.title.text = `${$t('page.home.voiceAll')}: ${(props.data?.voiceLoraTotal ?? 0) + (props.data?.voiceNoLoraTotal ?? 0)}`;
      opts.series[0].name = originOpts.series[0].name;

      opts.series[0].data = [
        {
          name: $t('page.home.voiceLoraTotal'),
          value: props.data?.voiceLoraTotal ?? 0,
        },
        {
          name: $t('page.home.voiceNoLoraTotal'),
          value: props.data?.voiceNoLoraTotal ?? 0,
        },
        // { name: $t('page.home.work'), value: 40 },
        // { name: $t('page.home.rest'), value: 30 },
      ];

      return opts;
    });
  }

  async function init() {
    mockData();
  }

  watch(
    () => props.data,
    () => {
      updateLocale();
    }
  );

  // init
  init();
</script>

<template>
  <NCard :bordered="false" class="card-wrapper">
    <div ref="domRef" class="h-360px overflow-hidden"></div>
  </NCard>
</template>

<style scoped></style>
